var CPUXYS = [
{X: 0 , Y: -36},
{X: 16 , Y: -36},
{X: 32 , Y: -32},
{X: 38 , Y: -16},
{X: 38 , Y: 0},
{X: 38 , Y: 14},
{X: 32 , Y: 29},
{X: 16 , Y: 37},
{X: 0 , Y: 37},

{X: -16 , Y: 37},
{X: -32 , Y: 31},
{X: -38 , Y: 12},
{X: -38 , Y: 0},
{X: -38 , Y: -16},
{X: -32 , Y: -32},
{X: -16 , Y: -36}
];
var canvas = null;//全局变量 画布这个dom 绑定事件用
var context = null;//全局变量 画布这个对象 画东西用
// 	画布cpu对象
var circles = [];
// 	画布线对象
var lineObjs = [];

/**
 *	初始化画布
 *	参数: 宽 高
 *	x , y
 *	data.width , data.height
 *	data.x , data.y
 **/
function init_canvas(data){
    $(".pop_block").append('<canvas style="position: absolute; top: ' + data.y + 'px;left : ' + data.x + 'px;" id="myCanvas" height="'+data.height+'"  width="'+data.width+'"></canvas>');
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext("2d");
    $(canvas).bind('click' ,canvasClick);

    drawCircles();
}
function canvasClick(e){
   	var offsetTop=$(".pop_block").offset().top;
   	var offsetLeft=$(".pop_block").offset().left;
   	var offsetHeight=$(".back1").height();
   	var offsetWidth=$(".back1").width();
     var clickX = e.pageX - offsetLeft;
     var clickY = e.pageY - offsetTop;

     if(((offsetWidth - 70) < clickX && clickX < (offsetWidth - 20)) && ((offsetHeight -70) < clickY &&  clickY < (offsetHeight -40))){
    	 $("#popmarsk").hide();
    		$("#backmask").hide();
    		drawCircles();
    	 circles=[];
     }
}
/**
 *	对画板上的对象重新操作后 进行重绘的方法
 */
function drawCircles() {
    // 清除画布，准备绘制
    context.clearRect(0, 0, canvas.width, canvas.height);
    //遍历所有的单元对象
    for(var i=0; i<circles.length; i++) {
        var circle = circles[i];
        // 绘制对象
        context.beginPath();
        context.fillStyle = "#fff";
        context.strokeStyle = "#fff";
       // context.strokeRect(circle.x,circle.y ,circle.width , circle.height);
        context.fill();
        context.stroke();
    }
      //遍历所有线的对象
    for(var i=0; i<lineObjs.length; i++) {
        var lineObj = lineObjs[i];
        // 绘制线
        DrawLine(lineObj.obj1 , lineObj.obj2, lineObj.color , context);
    }
}
/**
 *	画线 共通算法 包括拖拽跟随也是这个
 */
function DrawLine(obj1Place , obj2Place, color ,  context){
    context.beginPath();
   // context.setLineDash([0,1])
    context.lineWidth = 2;
	context.fillStyle='#bbbbbb';
	context.strokeStyle=color;
    //设置对象起始点和终点
    context.moveTo(obj1Place.x,obj1Place.y);
    context.lineTo(obj2Place.x,obj2Place.y);
    context.stroke();
}
/**
 *	两个元素中的中心进行连线
 *	obj1 : 	开始元素
 *	obj2:	目标元素
 */
function doLine(obj1 , obj2 ,funs){
   
    var obj1Place = {};
    var obj2Place = {};
    obj1Place.x = obj1.x + obj1.width / 2;
    obj1Place.y = obj1.y + obj1.height / 2;
    obj1Place.id = obj1.id;
    obj2Place.x = obj2.x + obj2.width / 2;
    obj2Place.y = obj2.y + obj2.height / 2;
    obj2Place.id = obj2.id;
    lineObjs.push({obj1:obj1Place , obj2:obj2Place});
}
/**
 *	两个CPU 端口连线
 *	obj1 : 	开始元素
 *	obj2:	目标元素
 *	index1:	1号元素的端口号
 *	index2:	2号元素的端口号
 */
function doLine2(obj1 , obj2 ,index1 , index2 , funs){
    var obj1Place = {};
    var obj2Place = {};
    obj1Place.x = obj1.x + obj1.width / 2 + CPUXYS[index1].X;
    obj1Place.y = obj1.y + obj1.height / 2 + CPUXYS[index1].Y;
    obj1Place.id = obj1.id;
    obj2Place.x = obj2.x + obj2.width / 2 + CPUXYS[index2].X;
    obj2Place.y = obj2.y + obj2.height / 2 + CPUXYS[index2].Y;
    obj2Place.id = obj2.id;
    lineObjs.push({obj1:obj1Place , obj2:obj2Place,color:"#00E9FF"});
}
function doLine3(obj1 , obj2 ,index1 , index2 , funs){
	var obj1Place = {};
	var obj2Place = {};
	obj1Place.x = obj1.x + obj1.width / 2
	obj1Place.y = obj1.y + obj1.height / 2 
	obj1Place.id = obj1.id;
	obj2Place.x = obj2.x + obj2.width / 2 + CPUXYS[index2].X;
	obj2Place.y = obj2.y + obj2.height / 2 + CPUXYS[index2].Y;
	obj2Place.id = obj2.id;
	lineObjs.push({obj1:obj1Place , obj2:obj2Place,color:"#4A4A4A"});
}
function doLine4(obj1 , obj2 ,index1 , index2 , funs){
	var obj1Place = {};
	var obj2Place = {};
	obj1Place.x = obj1.x + obj1.width / 2 + CPUXYS[index1].X;
	obj1Place.y = obj1.y + obj1.height / 2 + CPUXYS[index1].Y;
	obj1Place.id = obj1.id;
	obj2Place.x = obj2.x + obj2.width / 2
	obj2Place.y = obj2.y + obj2.height / 2
	obj2Place.id = obj2.id;
	lineObjs.push({obj1:obj1Place , obj2:obj2Place,color:"#4A4A4A"});
}

